<template>
	<view class="px-1">
		<c-skeleton-list
			:data="pagingObj.data0"
			:loading="firstLoading"
			:loadMoreStatus="pagingObj.status0"
			@clickLoadMore="pagingLoadNext"
		>
			<act-item
				v-for="(el, i) in pagingObj.data0"
				:data="el"
				:key="el.id"
				@join="handleJoinSuc(el)"
				:disabled="loading"
				:mb="i < pagingObj.data0.length - 1"
			/>
		</c-skeleton-list>
		<c-confirm-dialog></c-confirm-dialog>
	</view>
</template>

<script>
import { ref, onMounted } from 'vue';
import pagingComponent from '@/uni-sdk/components/multiple-paging-component.js';
import { getActPage } from '@/base/api/activity.js';

export default pagingComponent({
	loadDataHandler0: getActPage,
	onPullDownRefresh() {
		this.loadData();
	},
	setup(pagingSetting) {
		const loading = ref(false);
		const firstLoading = ref(true);
		async function loadData() {
			loading.value = true;
			if (!firstLoading.value) {
				uni.showLoading({
					title: '加载中...',
					mask: true,
				});
			}
			await pagingSetting.pagingLoad(true);
			if (!firstLoading.value) {
				uni.hideLoading();
			}
			firstLoading.value = false;
			loading.value = false;
		}
		onMounted(() => {
			loadData();
		});
		async function handleJoinSuc(item){
			const page = pagingSetting.getPageIndexById(item.id, "id");
			await pagingSetting.pagingLoad(false, page);
			getApp().globalData.setUpdatePage("pages/home/first/first");
		}
		return {
			loading,
			firstLoading,
			loadData,
			handleJoinSuc,
		};
	},
});
</script>

<style></style>
